<template>
	<view class="p-4 addressList">
		<view @click="clickAddress(item)" class="flex justify-between items-center bg-white p-3 rounded-2 mb-2"
			v-for="item,index in addressList">
			<wd-radio-group custom-class="ml-1 mr-3" v-model="item.checked" shape="dot" @change="change">
				<wd-radio :value="true"></wd-radio>
			</wd-radio-group>
			<view class="flex-grow">
				<view class="flex">
					<view class="min-w-45px">
						{{item.name}}
					</view>
					<view class="mx-2">
						{{item.phone}}
					</view>
					<wd-tag v-if="item.isDefault" type="primary" round custom-class="defaultTag">默认</wd-tag>
				</view>
				<view class="mt-2 addressDetail ">
					{{item.detail}}
				</view>
			</view>
			<view @click.stop>
				<wd-icon @click.native="clickEdit(item)" custom-class="mr-1" name="edit-1" size="22px"></wd-icon>
			</view>
		</view>
	</view>

	<view class="bg-white px-4 py-3 fixed addWrap w-screen box-border">
		<wd-button @click="clickAdd" type="primary" block>新增地址</wd-button>
	</view>
	<wd-toast />
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getAddressList,
		updateAddress
	} from '../../api/address';
	import {
		useToast
	} from 'wot-design-uni';
	import {
		onShow
	} from "@dcloudio/uni-app";

	const addressList = ref([]);
	const change = (e) => {
		console.log(e);
	}
	const toast = useToast();
	const clickAddress = (item) => {
		item.checked = true;
		updateAddress({
			_id: item._id,
			checked: true
		}).then(res => {
			fetchList();
			toast.success("更新成功");
		});
	}
	const clickEdit = (item) => {
		uni.navigateTo({
			url: `/pages/addressDetail/addressDetail?id=${item._id}`
		})
	}
	const clickAdd = () => {
		uni.navigateTo({
			url: `/pages/addressDetail/addressDetail`
		})
	}
	const fetchList = () => {
		getAddressList().then(res => {
			addressList.value = res.data.list;
		})
	}
	onShow(() => {
		fetchList();
	});
</script>

<style>
	.addWrap {
		bottom: var(--status-bar-height);
	}

	.defaultTag {
		padding: 1.5px 8px !important;
		line-height: 1.3;
	}

	.addressDetail {
		max-width: 86%;
	}

	.addressList {
		height: calc(100vh - 61px - var(--status-bar-height));
		box-sizing: border-box;
		overflow: scroll;
	}
</style>